<style scoped></style>

<template>
  <main class="min-h-full p-1 sm:p-4">
    <section class="space-y-2">
      <h2 class="font-bold text-2xl text-center">最新更新的剧集，更新于：2025年2月25日</h2>
      <div
        class="grid 2xl:grid-cols-7 xl:grid-cols-6 lg:grid-cols-5 md:grid-cols-4 sm:grid-cols-3 grid-cols-2 justify-between"
      >
        <div v-for="index in 100" :key="index" class="p-1.5 select-none">
          <div class="relative rounded-md overflow-hidden group cursor-pointer">
            <img
              class="group-hover:scale-110 transition-all duration-300"
              src="https://gips2.baidu.com/it/u=1651586290,17201034&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f600_800"
            />

            <span class="z-10 absolute bottom-1.5 left-1/2 -translate-x-1/2 text-gray-100 text-xs">
              更新至16集
            </span>

            <mask class="absolute to-black from-transparent bg-gradient-to-b opacity-20 inset-0" />
          </div>

          <div
            class="font-bold mt-1 truncate text-center cursor-pointer hover:text-orange-500 transition-all"
          >
            鹅绒雪
          </div>
        </div>
      </div>
    </section>

    <!-- <section>随机推荐</section> -->
  </main>
</template>

<script setup lang="ts"></script>
